<template>
	<view class="equipmentNum">
		<view class="Remaining">
			<text>锦鲤算力卡数量</text>
			<text class="greenColor">剩余20张</text>
		</view>
		<!-- 步进器，后期优化的时候可以封装 -->
		<view class="steep">
			<van-stepper v-model="steepValue" input-width="120px" button-size="40px" />
			<text style="color: rgba(255, 255, 255, 0.5)">1台/张</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	let steepValue = ref<number>(1)
</script>

<style lang="scss" scoped>
	::v-deep .van-stepper {
		display: flex;
		background: rgba(255, 255, 255, 0.10);
	}

	::v-deep .van-stepper__minus {
		/* width: 118px !important; */
		/* height: 80px !important; */
		/* font-size: 28px; */
		border-right: none !important;
		border-top-left-radius: 16px;
		border-bottom-left-radius: 16px;
	}

	::v-deep .van-stepper__plus {
		border-left: none !important;
		border-top-right-radius: 16px;
		border-bottom-right-radius: 16px;
	}

	::v-deep .van-stepper__minus,
	::v-deep .van-stepper__plus,
	::v-deep .van-stepper__input {
		width: 40px;
		height: 40px;
		background: none;
		border: 1px solid gray;
		color: gray;
		margin: 0;
	}

	::v-deep .van-haptics-feedback {
		background-color: #878888;
		color: #fff;
	}

	.equipmentNum {
		width: 91%;
		margin: 40px auto 0 auto;
		color: #fff;
		font-size: 24px;

		.Remaining {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 0 16px 0;

			.greenColor {
				color: rgba(0, 208, 185, 1);
			}
		}

		.steep {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			--van-stepper-input-font-size: 28px
		}
	}
</style>